<template>
  <div class="bar">
    <canvas ref="el" :width="computedCanvasWidth" :height="computedCanvasHeight"></canvas>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'Bar',
  props: {
    canvasWidth: {
      type: Number,
      default: 300
    },
    canvasHeight: {
      type: Number,
      default: 150
    },
    list: {
      /**
       * {
       *   color: '#xxx',
       *   name: '已处理',
       *   data: {
       *     '6月': 100,
       *     '7月': 12,
       *   }
       * }
       */
      type: Array,
      default: () => []
    },
    xAxisMargin: {
      type: Number,
      default: 8
    },
    gridBottom: {
      type: Number,
      default: 12
    }
  },
  data() {
    return {}
  },
  watch: {
    list() {
      this.initChart()
    }
  },
  computed: {
    computedCanvasWidth() {
      return this.$base * this.canvasWidth
    },
    computedCanvasHeight() {
      return this.$base * this.canvasHeight
    },
    legend() {
      return (this.list || []).map(item => {
        return item.name
      })
    },
    xAxis() {
      const ret = []
      this.list.forEach(item => {
        const keys = Object.keys(item.data)
        keys.forEach(key => {
          if (ret.indexOf(key) === -1) {
            ret.push(key)
          }
        })
      })

      return ret.sort()
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const xAxis = this.xAxis
      const series = this.list.map(item => {
        return {
          name: item.name,
          type: 'bar',
          data: xAxis.map(x => {
            return item.data[x] || 0
          }),
          emphasis: {
            focus: 'series'
          },
          barWidth: this.$base * 8,
          barGap: 1.5,
          label: {
            show: true,
            color: '#0EE6FC',
            position: 'top',
            fontSize: this.$base * 14
          },
          itemStyle: {
            color: item.color
          }
        }
      })

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.legend,
          // orient: 'vertical',
          // right: this.$base * 15,
          top: 20,
          textStyle: {
            fontSize: this.$base * 12,
            color: '#fff'
          }
        },
        grid: {
          left: this.$base * 15,
          right: this.$base * 15,
          bottom: this.$base * this.gridBottom, // 12
          top: this.$base * 60,
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.xAxis,
            axisLabel: {
              fontSize: this.$base * 12,
              color: '#fff',
              margin: this.$base * this.xAxisMargin // 8
            },
            axisLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            splitLine: {
              show: false
            },
            axisLabel: {
              fontSize: this.$base * 12,
              color: '#fff',
              showMinLabel: false
            }
          }
        ],
        series: series
      }

      if (!this.instance) {
        this.instance = echarts.init(this.$refs.el)
      }
      this.instance.setOption(option)
    }
  }
}
</script>

<style lang="scss">
.bar {
  width: 100%;
  height: 100%;
  // canvas {
  //   width: 100%;
  //   height: 100%;
  // }
}
</style>